<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/user' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工作台</el-breadcrumb-item>
      <el-breadcrumb-item>OA审批</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row>
        <el-col :span="9">
          <!-- 3.定义搜索框 -->
          <el-input placeholder="请输入OA标题(支持模糊查询)" v-model="queryInfo.query" clearable @clear="getOAList">
            <el-button slot="append" icon="el-icon-search" @click="getOAList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>正在审核的OA申请</span>
            </div>
            <el-table :data="adminOAList" border stripe fit>
              <el-table-column type="index" label="OA编号" width="100"></el-table-column>
              <el-table-column prop="itemName" label="OA事项"></el-table-column>
              <el-table-column prop="submitter" label="提交人"></el-table-column>
              <el-table-column prop="sortingId" label="oa分类" width="100"
                               :formatter="sortingIdFormater" sortable></el-table-column>
              <!--              <el-table-column prop="approver" label="审核人"></el-table-column>-->
              <el-table-column prop="itemCause" label="事由"></el-table-column>
              <el-table-column prop="startTime" label="开始日期" :formatter="dateFormat" width="190"></el-table-column>
              <el-table-column prop="endTime" label="结束日期" :formatter="dateFormat" width="190"></el-table-column>
              <el-table-column prop="itemStatus" label="OA状态" width="100"
                               :formatter="itemStatusFormater" sortable></el-table-column>
              <el-table-column prop="comments" label="审核回复"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="getOaById(scope.row)" :disabled="scope.row.subStatus">审批</el-button>
                  <!--                  <el-button type="danger" size="small" @click="deleteOA(scope.row)">删除</el-button>-->
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!--OA审核界面-->
    <el-dialog title="审核OA" :visible.sync="approveOAVisible">
      <el-form :model="getOaByIdList" ref="getOaByIdRef" >
        <el-form-item label="申请标题" :label-width="formLabelWidth">
          <el-input v-model="getOaByIdList.itemName" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请原因" :label-width="formLabelWidth">
          <el-input v-model="getOaByIdList.itemCause" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请类型" :label-width="formLabelWidth" >
          <el-select v-model="sortingIdData[getOaByIdList.sortingId]" placeholder="请选择申请类型" disabled>
            <el-option label="请假" value="请假">
            </el-option>
            <el-option label="出差" value="出差">
            </el-option>
            <el-option label="离职" value="离职">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期" :label-width="formLabelWidth">
          <el-date-picker type="datetime" format="yyyy年MM月dd日HH时mm分" v-model="getOaByIdList.startTime" disabled></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" :label-width="formLabelWidth">
          <el-date-picker type="datetime" format="yyyy年MM月dd日HH时mm分" v-model="getOaByIdList.endTime" disabled></el-date-picker>
        </el-form-item>
        <el-form-item label="OA回复" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="getOaByIdList.comments">
          </el-input>
        </el-form-item>
        <el-form-item label="审核结果" :label-width="formLabelWidth">
          <el-select v-model="getOaByIdList.itemStatus" placeholder="请选择申请类型">
            <el-option label="审核通过" value="2">
              <el-tag type="success">审核通过</el-tag>
            </el-option>
            <el-option label="审核驳回" value="3">
              <el-tag type="danger">审核驳回</el-tag>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approveOAVisible = false">取 消</el-button>
        <el-button type="primary" @click="approveOABtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: 'LeaveJob',
  data() {
    return {
      adminOAList: [],
      getOaByIdList: [],
      approveOAVisible: false,
      formLabelWidth: '200px',
      sortingIdData:{
        1:"请假",
        2:"出差",
        3:"离职"
      },
      queryInfo: {
        userRole: '',
        empId: '',
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      subStatus: [],
    }
  },
  methods: {
    async getOAList() {
      this.queryInfo.userRole='approver_id'
      this.queryInfo.empId = this.$cookies.get('empId')
      const {data: result} = await this.$http.get('/user/list', {
        params: this.queryInfo
      })
      if (result.status !== 200) return this.$message.error("OA列表查询失败")
      this.adminOAList = result.data.rows
      this.total = result.data.total
      // console.log(this.adminOAList)
      // console.log("总记录数:" + this.total)
    },
    handleSizeChange(pageSize) {
      //console.log("每页展现的条数"+pageSize)
      this.queryInfo.pageSize = pageSize
      this.getOAList()
    },
    handleCurrentChange(pageNum) {
      //console.log("页数:"+pageNum)
      this.queryInfo.pageNum = pageNum
      this.getOAList()
    },
    async getOaById(oaApprove) {
      const OAId = oaApprove.id
      const {
        data: result
      } = await this.$http.get(`/user/getOaById/${OAId}`)
      if (result.status !== 200) return this.$message.error('OA列表查询失败')
      this.getOaByIdList = result.data
      // this.getOaByIdList.sortingId = null
      this.getOaByIdList.itemStatus=null
      this.approveOAVisible = true
      // this.subStatus=this.getOaByIdList.subStatus
      // console.log(this.subStatus)
      console.log(this.getOaByIdList)
    },
    sortingIdFormater(row) {
      // console.log(row)
      switch (row.sortingId) {
        case 1:
          return <el-tag>请假</el-tag>
        case 2:
          return <el-tag type="warning">出差</el-tag>
        case 3:
          return <el-tag type="danger">离职</el-tag>
        default:
          return <el-tag type="success">其他</el-tag>
      }
    },
    approveOABtn() {
      this.$refs.getOaByIdRef.validate(async valid => {
        //如果校验失败 则停止数据
        if (!valid) return
        // this.getOaByIdList.submitterId = this.$cookies.get('empId')
        const {data: result} =
          await this.$http.put('/user/ApproveOA', this.getOaByIdList)
        if (result.status !== 200) return this.$message.error("OA修改失败")
        this.$message.success("OA修改成功")
        //重新获取用户列表
        await this.getOAList()
        //关闭对话框
        this.approveOAVisible = false

      })
    },
    //用于时间格式化
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date === null) {
        return "";
      }
      // console.log("row" +row)
      return moment(date).format("YYYY-MM-DD HH:mm");
      // return moment(date).format('lll');
      // return moment.locale();
    },
    itemStatusFormater(row) {
      // console.log(row)
      switch (row.itemStatus) {
        case 1:
          return <el-tag>正在审批</el-tag>
        case 2:
          return <el-tag type="success">通过</el-tag>
        case 3:
          return <el-tag type="danger">未通过</el-tag>
        default:
          return <el-tag type="warning">其他</el-tag>
      }
    },
  },
  created() {
    //1.获取带审阅OA列表数据
    this.getOAList()
  },
}
</script>

<style scoped>

</style>
